<template class='addOrUpdate'>
  <el-dialog :title="!dataForm.id ? '添加' : '修改'" :close-on-click-modal="false" :visible.sync="visible">
    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="100px">
      <el-form-item label="广告名称" prop="title">
        <el-input placeholder="" v-model="dataForm.title" maxlength="16"></el-input>
      </el-form-item>
      <el-form-item label="广告位置" prop="mark_code" @change="changeMark">
        <el-select v-model="dataForm.mark_code" placeholder="请选择">
          <el-option v-for="item in adLocation" :key="item.id" :label="item.name" :value="item.mark_code">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="上线/下线" prop="on_off">
        <el-radio v-model="dataForm.on_off" :label="true">上线</el-radio>
        <el-radio v-model="dataForm.on_off" :label="false">下线</el-radio>
      </el-form-item>
      <el-form-item label="广告类型" prop="model_type">
        <el-select v-model="dataForm.model_type" placeholder="请选择" @change="changeType">
          <el-option v-for="item in modelType" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item v-if="
        dataForm.model_type == 'goods' || dataForm.model_type == 'service' || dataForm.model_type == 'point_goods'
      " label="选择商品">
        <el-button @click="dialogProduct()">选择商品</el-button>
        <template v-if="
          dataForm.model_type == 'goods' || dataForm.model_type == 'service' || dataForm.model_type == 'point_goods'
        ">
          <el-tag v-for="(item, index) in productClassifyMultipleSelection" :key="index" closable @close="productClassifyClose(index)">
            {{ item.title }}
          </el-tag>
        </template>
      </el-form-item>
      <el-form-item label="广告链接" prop="url" v-if="dataForm.model_type == 'url' || dataForm.model_type == 'inner_url'">
        <el-input placeholder="" v-model="dataForm.url"></el-input>
      </el-form-item>
      <el-form-item label="广告图片" prop="cover">
        <Imglist :tip="tip" @updataImg="updataImg" :limit="1" :value="blackImg" :dialogVisible="visible" :zi='true'></Imglist>
        <div class="sizeCls" v-for="item in adLocation" :key="item.id" v-if="item.mark_code == dataForm.mark_code">{{ item.width }}*{{ item.height }}</div>
      </el-form-item>
      <el-form-item label="广告备注" prop="remark">
        <el-input type="textarea" v-model="dataForm.remark" maxlength="200"></el-input>
      </el-form-item>
      <el-form-item label="排序号" prop="sort">
        <el-input-number :precision="0" v-model="dataForm.sort" :min="1"></el-input-number>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
    </span>

    <!--选择商品-->
    <el-dialog title="商品" :append-to-body="true" :visible.sync="dialogProductClassify" width="60%">
      <el-form :inline="true" :model="productPage">
        <el-form-item label="商品名称">
          <el-input v-model="productPage.title" placeholder="商品名称" clearable></el-input>
        </el-form-item>
        <!-- <el-form-item label="商品类型">
          <el-select
          v-model="productPage.point_goods"
          placeholder="请选择"
          @change="changeGoodsType"
        >
          <el-option
            v-for="item in modelGoodsType"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        </el-form-item> -->
        <el-form-item>
          <el-button @click="getDataList()">查询</el-button>
        </el-form-item>
      </el-form>
      <span class="textWorning">提示：点击商品名称及选中</span>
      <el-table highlight-current-row ref="multipleTable" :data="productClassifyTableData" tooltip-effect="dark" style="width: 100%"
        @row-click="handleSelectionChange">
        <!-- <el-table-column width="100px">
          <template slot-scope="scope">
            <el-radio :label="scope.row.id" v-model="dataForm.model_id">&nbsp;</el-radio>
          </template>
        </el-table-column> -->
        <el-table-column prop="title" label="商品名称"> </el-table-column>
      </el-table>
      <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="productPage.page" :page-sizes="[10, 20, 50, 100]"
        :page-size="productPage.limit" :total="totalPage" layout="total, sizes, prev, pager, next, jumper"></el-pagination>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogProductClassify = false">确 定</el-button>
        <!--  <el-button type="primary" @click="dialogProductClassify = false">确 定</el-button> -->
      </span>
    </el-dialog>
  </el-dialog>
</template>

<script>
import { treeDataTranslate } from '@/utils'
import Imglist from './../../oss/oss-uploadImg2'
import seviceApi from '@/api/serviceApi.js'
import serviceApione from '@/api/serviceApione.js'
export default {
  components: {
    Imglist
  },
  data () {
    return {
      visible: false,
      dialogVisible: false,
      dataForm: {
        id: '0',
        on_off: null,
        title: '',
        cover: '', // 图片
        mark_code: '', // 广告位
        model_type: '', // 广告类型
        remark: '',
        url: '',
        sort: '',
        model_id: '' // 商品详情id
      },
      markCode: '',
      blackImg: [],
      adLocation: [], // 广告位
      modelType: [
        //   {
        //   value: "opus",
        //   label: "作品"
        // }, {
        //   value: "news",
        //   label: "文章"
        // },

        {
          value: 'goods',
          label: '商品'
        },
        // {
        //   value: 'service',
        //   label: '服务'
        // },
        {
          value: 'url',
          label: '链接'
        },
        {
          value: 'inner_url',
          label: '内链'
        },
        // {
        //   value: 'point_goods',
        //   label: '积分商品'
        // }
      ],
      modelGoodsType: [
        {
          value: -1,
          label: '全部商品'
        },
        {
          value: 1,
          label: '积分商品'
        },
        {
          value: 0,
          label: '非积分商品'
        }
      ],
      dialogProductClassify: false, // 商品分类弹窗
      productClassifyTableData: [],
      productPage: {
        page: 1,
        limit: 10,
        title: '',
        added: 1,
        point_goods: -1
      },
      totalPage: 0,
      productClassifyMultipleSelection: [], // 选中的商品分类
      dataRule: {
        title: [
          {
            required: true,
            message: '广告名称不能为空',
            trigger: 'blur'
          }
        ],
        mark_code: [
          {
            required: true,
            message: '请选择广告位',
            trigger: 'blur'
          }
        ],
        on_off: [
          {
            required: true,
            message: '请选择上下线',
            trigger: 'blur'
          }
        ],
        model_type: [
          {
            required: true,
            message: '请选择广告类型',
            trigger: 'blur'
          }
        ],
        cover: [
          {
            required: true,
            message: '请上传图片',
            trigger: 'blur'
          }
        ],
        remark: [
          {
            required: true,
            message: '广告备注不能为空',
            trigger: 'blur'
          }
        ],
        sort: [
          {
            required: true,
            message: '排序号不能为空',
            trigger: 'blur'
          }
        ]
      },
      selectType: null,
      tip: null
    }
  },
  created () {
    // this.blackImg=[]
  },
  methods: {
    changeType () {
      if (
        this.dataForm.model_type == 'goods' ||
        this.dataForm.model_type == 'service' ||
        this.dataForm.model_type == 'point_goods'
      ) {
        this.productClassifyMultipleSelection = []
        this.dataForm.model_id = ''
      }
    },
    // 选择商品类型的查询
    changeGoodsType () {

    },
    changeMark () {
      let selectType = this.adLocation.filter(
        (val) => val.mark_code == this.dataForm.mark_code
      )[0]

      // this.tip = `* 建议尺寸${selectType.width}*${selectType.height}`
    },
    init (id) {
      this.dataForm = {
        id: '0',
        on_off: null,
        title: '',
        cover: '', // 图片
        mark_code: '', // 广告位
        model_type: '', // 广告类型
        remark: '',
        url: '',
        sort: '',
        model_id: '' // 商品详情id
      };
      this.dataForm.id = id || 0
      this.visible = true
      this.productClassifyMultipleSelection = [];
      this.$nextTick(() => {
        this.$refs['dataForm'].resetFields()
      })
      this.blackImg = []
      if (this.dataForm.id != 0) {
        seviceApi.getAdInfo(id).then((res) => {
          if (res && res.data.code == 200) {
            this.blackImg = res.data.data.cover.split(',')
            this.dataForm = res.data.data
            this.markCode = res.data.data.mark_code
            this.changeMark()
            // this.dataForm.mark_code = res.data.data.ad_location_name
            let id = res.data.data.model_id
            if (res.data.data.model_type == 'goods') {
              this.productPage.point_goods = 0
              seviceApi.getGoodsAllList(this.productPage).then((res) => {
                if (res && res.data.code == 200) {
                  res.data.page.list.forEach((eleList) => {
                    if (eleList.id == id) {
                      this.productClassifyMultipleSelection = [eleList]
                    }
                  })
                }
              })
            }
            if (res.data.data.model_type == 'point_goods') {
              this.productPage.point_goods = 1
              seviceApi.getGoodsAllList(this.productPage).then((res) => {
                if (res && res.data.code == 200) {
                  res.data.page.list.forEach((eleList) => {
                    if (eleList.id == id) {
                      this.productClassifyMultipleSelection = [eleList]
                    }
                  })
                }
              })
            }
            if (res.data.data.model_type == 'service') {
              seviceApi.getPlatformServiceList(this.productPage).then((res) => {
                if (res && res.data.code == 200) {
                  res.data.page.list.forEach((eleList) => {
                    if (eleList.id == id) {
                      this.productClassifyMultipleSelection = [eleList]
                    }
                  })
                }
              })
            }
          }
        })
      }
      // 平台广告位查询
      seviceApi.getAdLocationSelect().then((res) => {
        if (res && res.data.code == 200) {
          this.adLocation = res.data.list
        }
      })
    },
    // 上传图片
    updataImg (e) {
      this.dataForm.cover = e
    },
    // 选择商品
    // 查询商品列表
    getPdList () {
      if (this.selectType == 'goods') {
        this.productPage.point_goods = 0
        seviceApi.getGoodsAllList(this.productPage).then((res) => {
          if (res && res.data.code == 200) {
            this.productClassifyTableData = res.data.page.list
            this.totalPage = res.data.page.totalCount
          }
        })
      } else if (this.selectType == 'point_goods') {
        this.productPage.point_goods = 1
        seviceApi.getGoodsAllList(this.productPage).then((res) => {
          if (res && res.data.code == 200) {
            this.productClassifyTableData = res.data.page.list
            this.totalPage = res.data.page.totalCount
          }
        })
      } else {
        seviceApi.getPlatformServiceList(this.productPage).then((res) => {
          if (res && res.data.code == 200) {
            this.productClassifyTableData = res.data.page.list
            this.totalPage = res.data.page.totalCount
          }
        })
      }
    },
    // 打开商品弹窗
    dialogProduct () {
      this.productPage.title = ''
      this.dialogProductClassify = true
      this.selectType = this.dataForm.model_type
      this.getPdList()
    },
    // 每页数
    sizeChangeHandle (val) {
      this.productPage.limit = val
      this.getPdList()
    },
    // 当前页
    currentChangeHandle (val) {
      this.productPage.page = val
      this.getPdList()
    },
    // 选中商品
    handleSelectionChange (val) {
      if (val) {
        if (val.added) {
          this.productClassifyMultipleSelection = [val]
          this.dataForm.model_id = val.id
          this.dialogProductClassify == false
        } else {
          this.$message({
            message: '该商品已下架',
            type: 'warning'
          })
        }
      }
    },
    // 查询商品
    getDataList () {
      this.getPdList()
    },
    // 取消
    toggleSelection (rows) {
      this.dialogProductClassify == false
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row)
        })
      } else {
        this.$refs.multipleTable.clearSelection()
      }
    },
    // 移除选中的商品分类
    productClassifyClose (index) {
      this.productClassifyMultipleSelection.splice(
        this.productClassifyMultipleSelection.indexOf(index),
        1
      )
      this.dataForm.model_id = ''
    },

    // 提交
    dataFormSubmit () {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          let hint = ''
          if (
            this.dataForm.model_type == 'goods' ||
            this.dataForm.model_type == 'service' ||
            this.dataForm.model_type == 'point_goods'
          ) {
            if (this.dataForm.model_id == '') {
              this.$message({
                message: '请选择商品',
                type: 'warning'
              })
              return false
            } else {
              this.dataForm.url == ''
            }
          }
          if (this.dataForm.model_type == 'url') {
            if (this.dataForm.url == '') {
              this.$message({
                message: '请填写链接',
                type: 'warning'
              })
              return false
            } else {
              this.dataForm.model_id == ''
            }
          }
          if (this.dataForm.id == 0) {
            delete this.dataForm.id
            hint = '添加'
          } else {
            this.dataForm.mark_code = this.markCode
            hint = '修改'
          }
          if (
            Object.prototype.toString.call(this.dataForm.cover) ===
            '[object Array]'
          ) {
            this.dataForm.cover = this.dataForm.cover.join(',')
          } else {
            this.dataForm.cover = this.dataForm.cover
          }
          seviceApi.postAdSave(this.dataForm).then((res) => {
            if (res && res.data.code == 200) {
              this.$message({
                message: hint + '成功',
                type: 'success'
              })
              this.visible = false
              this.$emit('updataList', 1)
            }
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.sizeCls {
  color: #f56c6c;
}
</style>
